// 1. 入口  ./src/main.js
// 2, 出口  dist/bundle.js
// 3. html模板  ./src/index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  // 模式    development  || production  || none 
  mode: 'none',
  // 入口
  entry: {
    // 入口文件
    main: './src/main.js',
  },
  // 出口
  output: {
    // 出口文件
    filename: 'bundle.js',
    // 出口文件夹
    path: path.resolve(__dirname, 'dist'),
    // 每次打包前  清空目录
    clean: true
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html'
  })],
  // 
  module: {
    rules: [{
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        use: ['file-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}